<template>
    <div class="staff-stats-content">
      <div class="staff-count-row">
        <div class="staff-item">
          <div class="staff-icon">在</div>
          <div class="staff-label">在职人员</div>
          <div class="staff-num">384</div>
          <div class="staff-unit">个人</div>
        </div>
        <div class="staff-item">
          <div class="staff-icon">岗</div>
          <div class="staff-label">在岗人员</div>
          <div class="staff-num">370</div>
          <div class="staff-unit">个人</div>
        </div>
      </div>
      <div class="staff-count-row">
        <div class="staff-item">
          <div class="staff-icon">新</div>
          <div class="staff-label">本月新入</div>
          <div class="staff-num">5</div>
          <div class="staff-unit">个人</div>
        </div>
        <div class="staff-item">
          <div class="staff-icon">离</div>
          <div class="staff-label">本月离职</div>
          <div class="staff-num">2</div>
          <div class="staff-unit">个人</div>
        </div>
      </div>
      <div class="staff-count-row">
        <div class="staff-item">
          <div class="staff-icon">编</div>
          <div class="staff-label">编制内</div>
          <div class="staff-num">300</div>
          <div class="staff-unit">个人</div>
        </div>
        <div class="staff-item">
          <div class="staff-icon">外</div>
          <div class="staff-label">编制外</div>
          <div class="staff-num">84</div>
          <div class="staff-unit">个人</div>
        </div>
      </div>
       <!-- Add more rows/items if needed -->
    </div>
</template>
  
  <script setup lang="ts">

  </script>
  
  <style lang="less" scoped>
  @import '../../variables.less';
  
  .staff-stats-content {
    padding-top: 5px; // Add some top padding if needed
  }
  
  .staff-count-row {
    display: flex;
    flex-wrap: wrap; // Allow wrapping on smaller screens
    margin-bottom: 10px;
    gap: 10px 15px; // Row and column gap
  }
  
  .staff-item {
    display: flex;
    align-items: center;
    flex-basis: calc(50% - 8px); // Approx 2 items per row, accounting for gap
    flex-grow: 1; // Allow items to grow slightly
    min-width: 140px; // Prevent items becoming too narrow
  }
  
  .staff-icon {
    width: 20px;
    height: 20px;
    background-color: rgba(0, 102, 204, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px; // Increased margin
    font-size: 12px;
    font-weight: bold;
    color: @text-color-light;
    flex-shrink: 0;
  }
  
  .staff-label {
    font-size: 13px;
    color: @text-color;
    margin-right: 5px; // Spacing between label and number
    white-space: nowrap;
  }
  
  .staff-num {
    font-size: 15px;
    font-weight: bold;
    color: @primary-color;
    margin: 0 5px;
    white-space: nowrap;
  }
  
  .staff-unit {
    font-size: 11px;
    color: darken(@text-color, 15%);
    white-space: nowrap;
  }
  
  // Responsive adjustments specifically for this panel if needed
  @media (max-width: 480px) {
      .staff-item {
          flex-basis: 100%; // Stack items on very small screens
      }
  }
  </style>